<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="makumba-dev">
<title>Makumba documentation</title>
<link rel="stylesheet" type="text/css" media="all" href="../main.css">
<link rel="stylesheet" type="text/css" media="all" href="calendarStyle.css">
<style type="text/css">
li {
  padding-top: 5px;
  padding-bottom: 5px;
}
</style>
<script type="text/javascript" src="../main.js"></script>
<script type="text/javascript" src="kruseCalendarPopup_combined.js"></script>
<script type="text/javascript" src="makumbaDateFunctions.js"></script>
<script language="javascript" type="text/javascript">
var birthdateCalendar = new CalendarPopup("makCalendarDiv");
birthdateCalendar.showYearNavigation();
birthdateCalendar.setReturnFunction("setMultipleValuesbirthdate");
function setMultipleValuesbirthdate(y,m,d) {
  document.getElementById('birthdate_0').selectedIndex=LZ(d)-1;
  document.getElementById('birthdate_1').selectedIndex=LZ(m)-1;
  document.getElementById('birthdate_2').value=y;
};
var birthdateCalendar2 = new CalendarPopup("makCalendarDiv2");
birthdateCalendar2.showYearNavigation();
birthdateCalendar2.setReturnFunction("setMultipleValuesbirthdate2");
function setMultipleValuesbirthdate2(y,m,d) {
  document.getElementById('birthdate2_0').selectedIndex=LZ(d)-1;
  document.getElementById('birthdate2_1').selectedIndex=LZ(m)-1;
  document.getElementById('birthdate2_2').value=y;
};
</script>
</head>
<body>
<script type="text/javascript">
   makeNavBar("../");
</script>
<h1>JavaScript calendar date input with Makumba</h1>
<p>A regular date input will be rendered with 1 to 6 input boxes for the day, month, year, hour, minutes and seconds,
depending on the date format you chose using the format="" attribute in &lt;mak:input&gt;.<br>
For example,
<pre class="example">&lt;mak:input name="birthdate" format="dd MMM yyyy"/&gt;</pre>
will render as follows:
<br>
<br>
<select name="birthdate0_0" id="birthdate0_0">
  <option value="1" selected="selected">01</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="4">04</option>
  <option value="5">05</option>
  <option value="6">06</option>
  <option value="7">07</option>
  <option value="8">08</option>
  <option value="9">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
  <option value="31">31</option>
</select>
<select name="birthdate0_1" id="birthdate0_1">
  <option value="0" selected="selected">Jan</option>
  <option value="1">Feb</option>
  <option value="2">Mar</option>
  <option value="3">Apr</option>
  <option value="4">May</option>
  <option value="5">Jun</option>
  <option value="6">Jul</option>
  <option value="7">Aug</option>
  <option value="8">Sep</option>
  <option value="9">Oct</option>
  <option value="10">Nov</option>
  <option value="11">Dec</option>
</select>
<input name="birthdate0_2" id="birthdate0_2" value="1900" maxlength="4" size="4" type="text">
</br>
<p>Additionally, Makumba can provide a JavaScript-based calendar chooser. To enable this widget, you need to:
<ol>
  <li>Download the needed JavaScripts:
  <ul>
    <li><a href="kruseAnchorPosition.js">kruseAnchorPosition.js</a></li>
    <li><a href="kruseCalendarPopup.js">kruseCalendarPopup.js</a></li>
    <li><a href="kruseDateFunctions.js">kruseDateFunctions.js</a></li>
    <li><a href="krusePopupWindow.js">krusePopupWindow.js</a></li>
    <li><a href="makumbaDateFunctions.js">makumbaDateFunctions.js</a></li>
  </ul>
  </li>
  <li>Include the script in your page. You can do that in two ways:
  <ul>
    <li>If you have access to the page header use javascript include<br>
    <pre class="example">&lt;head&gt;
...
&lt;script type=&quot;text/javascript&quot; src=&quot;kruseAnchorPosition.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;kruseCalendarPopup.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;kruseDateFunctions.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;krusePopupWindow.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;makumbaDateFunctions.js&quot;&gt;&lt;/script&gt;
...<br>&lt;/head&gt;</pre></li>
    <li>When the page header is not in the JSP you work with and you want to keep everything close to the form which contains
    the chooser you can include the script server side, like this <br>
    <pre class="example">&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;
&lt;%@include file=&quot;kruseAnchorPosition.js&quot; %&gt;
&lt;%@include file=&quot;kruseCalendarPopup.js&quot; %&gt;
&lt;%@include file=&quot;kruseDateFunctions.js&quot; %&gt;
&lt;%@include file=&quot;krusePopupWindow.js&quot; %&gt;
&lt;%@include file=&quot;makumbaDateFunctions.js&quot; %&gt;
&lt;/script&gt;</pre></li>
  </ul>
  </li>
  <li>Say you have a form that contains a date input as follows <pre class="example">&lt;mak:...form ...<b>&gt;
</b>&lt;mak:input name=<b>&quot;birthDate&quot;</b>/&gt;
&lt;input type=&quot;submit&quot;&gt;
&lt;/mak:...form&gt;</pre></li>
  <li>By default, for date inputs, following code will be added after your input: <pre class="example">
&lt;script language="javascript" type="text/javascript"&gt;
var birthdateCalendar = new CalendarPopup("makCalendarDiv");
birthdateCalendar.showYearNavigation();
birthdateCalendar.setReturnFunction("setMultipleValuesbirthdate");
function setMultipleValuesbirthdate(y,m,d) {
  document.getElementById('birthdate_0').selectedIndex=LZ(d)-1;
  document.getElementById('birthdate_1').selectedIndex=LZ(m)-1;
  document.getElementById('birthdate_2').value=y;
};
&lt;/script&gt;
&lt;a class="calendarEditor" href="#" onClick="birthdateCalendar.showCalendar('birthdateAnchor', getDateString(document.getElementById('birthdate_2'), document.getElementById('birthdate_1'), document.getElementById('birthdate_0'))); return false;" title="Pick date in calendar" name="birthdateAnchor" ID="birthdateAnchor"&gt; &lt;/a&gt;
&lt;div id="makCalendarDiv" style="position:absolute; visibility:hidden; background-color:white; layer-background-color:white;"&gt;&lt;/div&gt;
</pre> You can turn this off by modifying the <code>&lt;mak:input&gt;</code> tag, using the attribute <code>calendarEditor</code>, and
  setting it to "false": <pre class="example">&lt;mak:input name=&quot;birthDate&quot; <b>calendarEditor="false"</b> /&gt;</pre></li>
  <li>The rendering of the inputs will be the same, until you define a style for the class used in the &lt;a&gt; tag, e.g. <pre
    class="example">
.calendarEditor {
  background: url(calendar.gif) left center no-repeat;
  padding-left: 16px;
  height: 16px;
}
</pre> which will result in:<br>
  <br>
  <select name="birthdate_0" id="birthdate_0">
    <option value="1" selected="selected">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
    <option value="4">04</option>
    <option value="5">05</option>
    <option value="6">06</option>
    <option value="7">07</option>
    <option value="8">08</option>
    <option value="9">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select> <select name="birthdate_1" id="birthdate_1">
    <option value="0" selected="selected">Jan</option>
    <option value="1">Feb</option>
    <option value="2">Mar</option>
    <option value="3">Apr</option>
    <option value="4">May</option>
    <option value="5">Jun</option>
    <option value="6">Jul</option>
    <option value="7">Aug</option>
    <option value="8">Sep</option>
    <option value="9">Oct</option>
    <option value="10">Nov</option>
    <option value="11">Dec</option>
  </select> <input name="birthdate_2" id="birthdate_2" value="1900" maxlength="4" size="4" type="text"> </br>
  <a class="calendarEditor" href="#"
    onclick="birthdateCalendar.showCalendar('birthdateAnchor', getDateString(document.getElementById('birthdate_2'), document.getElementById('birthdate_1'), document.getElementById('birthdate_0'))); return false;"
    title="Pick date in calendar" name="birthdateAnchor" id="birthdateAnchor"> </a>
  <div id="makCalendarDiv" style="position:absolute; visibility:hidden; background-color:white; layer-background-color:white;"></div>
  <p>Please note that the icon might not appear in some browsers, e.g. in Safari.</p>
  </li>
  <li>To add text or other formatting to your calendar link, you can use the <code>calendarEditorLink</code> attribute: <pre
    class="example">&lt;mak:input name=&quot;birthDate&quot; <b>calendarEditorLink="[calendar]"</b> /&gt;</pre> Which will result
  in the link being generated as <pre class="example">
&lt;a class="calendarEditor" href="#" onClick="birthdateCalendar.showCalendar('birthdateAnchor', getDateString(document.getElementById('birthdate_2'), document.getElementById('birthdate_1'), document.getElementById('birthdate_0'))); return false;" title="Pick date in calendar" name="birthdateAnchor" ID="birthdateAnchor"&gt; &lt;/a&gt;
</pre>and will render as:<br>
  <br>
  <select name="birthdate2_0" id="birthdate2_0">
    <option value="1" selected="selected">01</option>
    <option value="2">02</option>
    <option value="3">03</option>
    <option value="4">04</option>
    <option value="5">05</option>
    <option value="6">06</option>
    <option value="7">07</option>
    <option value="8">08</option>
    <option value="9">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select> <select name="birthdate2_1" id="birthdate2_1">
    <option value="0" selected="selected">Jan</option>
    <option value="1">Feb</option>
    <option value="2">Mar</option>
    <option value="3">Apr</option>
    <option value="4">May</option>
    <option value="5">Jun</option>
    <option value="6">Jul</option>
    <option value="7">Aug</option>
    <option value="8">Sep</option>
    <option value="9">Oct</option>
    <option value="10">Nov</option>
    <option value="11">Dec</option>
  </select> <input name="birthdate2_2" id="birthdate2_2" value="1900" maxlength="4" size="4" type="text"> </br>
  <a class="calendarEditor" href="#"
    onclick="birthdateCalendar2.showCalendar('birthdateAnchor2', getDateString(document.getElementById('birthdate2_2'), document.getElementById('birthdate2_1'), document.getElementById('birthdate2_0'))); return false;"
    title="Pick date in calendar" name="birthdateAnchor2" id="birthdateAnchor2">[calendar]</a>
  <div id="makCalendarDiv2" style="position:absolute; visibility:hidden; background-color:white; layer-background-color:white;"></div>
  <p>Note that you can use any kind of HTML in the <code>calendarEditorLink=""</code> attribute, e.g. also the <code>&lt;img
  ... &gt;</code> tag.
  <li>The calendar appearance can be customised with CSS, the sample style used here can be found in <a
    href="calendarStyle.css">calendarStyle.css</a>.</li>
</ol>
<br>
<br>
<br>

<script type="text/javascript">
   makeFooter("$Id: makumba-javascript.html,v 1.2 2006/01/16 12:41:18 manuel_gay Exp $");
</script>
</body>
</html>
